<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <title>${title}</title>

    <meta name="description" content="${description}">
    <meta name="author" content="${author}">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- REVEAL CSS-->
    <link rel="stylesheet" href="libs/reveal.js/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="libs/reveal.js/3.8.0/css/reveal.css">
    <link rel="stylesheet" href="libs/reveal.js/3.8.0/css/theme/${theme}.css" id="theme">
    <link rel="stylesheet" href="libs/reveal.js/3.8.0/plugin/title-footer/title-footer-mod.css" />



    <!-- Theme used for syntax highlighting of code -->
    <link rel="stylesheet" href="libs/reveal.js/3.8.0/lib/css/zenburn.css">
    <link rel="stylesheet" href="libs/highlight.js/9.15.10/${highlightTheme}.css">

     ${customTheme ? `<link rel="stylesheet" href="${customTheme}.css">` : ''}

    <!-- Printing and PDF exports -->
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match(/print-pdf/gi) ? 'libs/reveal.js/3.8.0/css/print/pdf.css' : 'libs/reveal.js/3.8.0/css/print/paper.css';
        document.getElementsByTagName('head')[0].appendChild(link);
    </script>
        
        <style>
                
                /* Solarized Light theme */
                .line { display: block; }
                .line.focus { background: #fdf6e3; color: #657b83; }
                .line.focus .hljs-comment, .line.focus .hljs-quote { color: #93a1a1; }
                .line.focus .hljs-keyword, .line.focus .hljs-selector-tag, .line.focus .hljs-addition { color: #859900; }
                .line.focus .hljs-number, .line.focus .hljs-string, .line.focus .hljs-meta .hljs-meta-string, .line.focus .hljs-literal, .line.focus .hljs-doctag, .line.focus .hljs-regexp { color: #2aa198; }
                .line.focus .hljs-title, .line.focus .hljs-section, .line.focus .hljs-name, .line.focus .hljs-selector-id, .line.focus .hljs-selector-class { color: #268bd2; }
                .line.focus .hljs-attribute, .line.focus .hljs-attr, .line.focus .hljs-variable, .line.focus .hljs-template-variable, .line.focus .hljs-class .hljs-title, .line.focus .hljs-type { color: #b58900; }
                .line.focus .hljs-symbol, .line.focus .hljs-bullet, .line.focus .hljs-subst, .line.focus .hljs-meta, .line.focus .hljs-meta .hljs-keyword, .line.focus .hljs-selector-attr, .line.focus .hljs-selector-pseudo, .line.focus .hljs-link { color: #cb4b16; }
                .line.focus .hljs-built_in, .line.focus .hljs-deletion { color: #dc322f; }
                .line.focus .hljs-formula { background: #eee8d5; }
                .line.focus .hljs-emphasis { font-style: italic; }
                .line.focus .hljs-strong { font-weight: bold; }
                .yellow-slide .line.focus:nth-child(2) { background: yellow; }

    .reveal .slides section .code-presenting-annotation {
        font-size: 70%;
    }
    .reveal .slides section .fragment.current-only {
        visibility: visible;
        display: none;
    }
    .reveal .slides section .fragment.current-only.current-fragment {
        display: block;
    }
    .line {
        display: block;
    }
    .line.focus {
        /* opacity: 1.0; */
    }

.hljs {
  background: none;
}

.reveal pre {
  width: 98%;
  margin: 0px;
  box-shadow: none;
}

.reveal pre code {
  font-size: 1.2em;
  line-height: 1.2;
  border-radius: 10px;
  max-height: 60vh !important;
  overflow: hidden !important;
}

@media (device-width: 100vw) and (device-height: 100vh) {
  .reveal pre code {
    max-height: 50vh !important;
  }
}

#logo img {
  max-height: 3.5em;
  max-width: none;
  min-width: 50px;
}

.reveal .slides section .code-presenting-annotation {
  color: white;
  background: black;
  padding: 0px 15px;
  border-radius: 15px;
  opacity: 0.75 !important;
  font-size: 50% !important;
}

</style>
<script>
         if(window.location.search.match( /print-pdf-now/gi )) {
           window.print();
         }
      </script>
</head>

<body>

        ${logoImg ? `
        <div id="logo" style="position: fixed; top: 20px; left: 20px; z-index: 1">
            <img src="${logoImg}"/>
        </div>` : ''}

    <div class="reveal">

        <!-- Any section element inside of this container is displayed as a slide -->
        <div class="slides">

            <section data-markdown="/markdown.md" data-separator="${separator}" data-separator-vertical="${verticalSeparator}"
                        data-separator-notes="${notesSeparator}" data-charset="utf-8">
            </section>
        </div>


    </div>

    <script src="libs/reveal.js/3.8.0/lib/js/head.min.js"></script>
    <script src="libs/reveal.js/3.8.0/js/reveal.js"></script>
<!-- 
    <script src="libs/jquery/2.2.4/jquery.min.js"></script> -->
    <script>

        // More info https://github.com/hakimel/reveal.js#configuration
        Reveal.initialize({
           
            controls: ${controls},
            controlsTutorial: ${controlsTutorial},
            controlsLayout: '${controlsLayout}',
            controlsBackArrows: '${controlsBackArrows}',
            progress: ${progress},
            slideNumber: ${slideNumber},
            history: ${history},
            keyboard: ${keyboard},
            overview: ${overview},
            center: ${center},
            touch: ${touch},
            loop: ${loop},
            rtl: ${rtl},
            shuffle: ${shuffle},
            fragments: ${fragments},
            fragmentInURL: ${fragmentInURL},
            embedded: ${embedded},
            help: ${help},
            showNotes: ${showNotes},
            autoPlayMedia: ${autoPlayMedia},
            autoSlide: ${autoSlide},
            autoSlideStoppable: ${autoSlideStoppable},
            autoSlideMethod: Reveal.navigateNext,
            defaultTiming: ${defaultTiming},
            mouseWheel: ${mouseWheel},
            hideAddressBar: ${hideAddressBar},
            previewLinks: ${previewLinks},
            transition: '${transition}',
            transitionSpeed: '${transitionSpeed}',
            backgroundTransition: '${backgroundTransition}',
            viewDistance: ${viewDistance},
            parallaxBackgroundImage: '${parallaxBackgroundImage}',
            parallaxBackgroundSize: '${parallaxBackgroundSize}',
            parallaxBackgroundHorizontal: ${parallaxBackgroundHorizontal},
            parallaxBackgroundVertical: ${parallaxBackgroundVertical},
            display: '${display}',

            // More info https://github.com/hakimel/reveal.js#dependencies
            dependencies: [
               // { src: 'libs/reveal.js/3.8.0/lib/js/classList.js', condition: function () { return !document.body.classList; } },
                { src: 'libs/reveal.js/3.8.0/plugin/markdown/marked.js', condition: function () { return !!document.querySelector('[data-markdown]'); } },
                { src: 'libs/reveal.js/3.8.0/plugin/markdown/markdown.js', condition: function () { return !!document.querySelector('[data-markdown]'); } },
               // { src: 'libs/reveal.js/3.8.0/plugin/highlight/highlight.js', async: true, callback: function () { hljs.initHighlightingOnLoad(); } },
                
                ${enableSearch ? `{ src: 'libs/reveal.js/3.8.0/plugin/search/search.js', async: true },` : ''}
                ${enableZoom ? `{ src: 'libs/reveal.js/3.8.0/plugin/zoom-js/zoom.js', async: true },` : ''}
                
                
                { src: 'libs/reveal.js/3.8.0/plugin/notes/notes.js', async: true },
                ${enableChalkboard ? `{ src: 'libs/reveal.js/3.8.0/plugin/chalkboard/chalkboard.js' },` : ''}
                
                
                { src: 'libs/reveal.js/3.8.0/plugin/chart/Chart.min.js' },
                { src: 'libs/reveal.js/3.8.0/plugin/chart/csv2chart.js' },
                { src: 'libs/reveal.js/3.8.0/plugin/embed-tweet/embed-tweet.js' },
                ${enableMenu ? `{ src: 'libs/reveal.js/3.8.0/plugin/menu/menu.js' },` : ''}
                
                
                { src: 'libs/reveal.js/3.8.0/plugin/math/math.js', async: true },
                { src: 'libs/highlight.js/9.15.10/highlight.js', async: true },

                ${enableTitleFooter ? `{ src: 'libs/reveal.js/3.8.0/plugin/title-footer/title-footer.js', async: true, callback: function() { title_footer.initialize(); } },` : ''}
                
                
		
                { src: 'libs/highlight.js/9.15.10/reveal-code-focus-1.0.0-mod.js',
                  async: true,
                  callback: function() {
                    RevealCodeFocus();
                  }
                },
               // {src: 'libs/reveal.js/3.8.0/plugin/line-numbers/line-numbers.js'}
            ]
            ,
            keyboard: {
                67: function () { RevealChalkboard.toggleNotesCanvas() },	// toggle notes canvas when 'c' is pressed
                66: function () { RevealChalkboard.toggleChalkboard() },	// toggle chalkboard when 'b' is pressed
                46: function () { RevealChalkboard.clear() },	// clear chalkboard when 'DEL' is pressed
                8: function () { RevealChalkboard.reset() },	// reset chalkboard data on current slide when 'BACKSPACE' is pressed
                68: function () { RevealChalkboard.download() },	// downlad recorded chalkboard drawing when 'd' is pressed
            },
            math: {
                mathjax: 'libs/reveal.js/3.8.0/plugin/math/MathJax.js',
					// mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
					config: 'TeX-AMS_HTML-full'
				},
            chart: {
					defaults: { 
						global: { 
							title: { fontColor: "#FFF" }, 
							legend: {
								position: "bottom",
								labels: { fontColor: "#FFF" },
							},
							tooltips: {
								labels: { fontColor: "#FFF" },
							},
						}, 
						scale: { 
							scaleLabel: { fontColor: "#FFF" }, 
							gridLines: { color: "#FFF", zeroLineColor: "#FFF" }, 
							ticks: { fontColor: "#FFF" }, 
						} 
					},
					line: { borderColor: [ "rgba(20,220,220,.8)" , "rgba(220,120,120,.8)", "rgba(20,120,220,.8)" ], "borderDash": [ [5,10], [0,0] ] }, 
					bar: { backgroundColor: [ "rgba(20,220,220,.8)" , "rgba(220,120,120,.8)", "rgba(20,120,220,.8)" ]}, 
					pie: { backgroundColor: [ ["rgba(0,0,0,.8)" , "rgba(220,20,20,.8)", "rgba(20,220,20,.8)", "rgba(220,220,20,.8)", "rgba(20,20,220,.8)"] ]},
					radar: { borderColor: [ "rgba(20,220,220,.8)" , "rgba(220,120,120,.8)", "rgba(20,120,220,.8)" ]}, 
				},
            menu: {
                // Specifies which side of the presentation the menu will 
                // be shown. Use 'left' or 'right'.
                side: 'left',

                // Specifies the width of the menu.
                // Can be one of the following:
                // 'normal', 'wide', 'third', 'half', 'full', or
                // any valid css length value
                width: 'normal',

                // Add slide numbers to the titles in the slide list.
                // Use 'true' or format string (same as reveal.js slide numbers)
                numbers: false,

                // Specifies which slide elements will be used for generating
                // the slide titles in the menu. The default selects the first
                // heading element found in the slide, but you can specify any
                // valid css selector and the text from the first matching
                // element will be used.
                // Note: that a section data-menu-title attribute or an element
                // with a menu-title class will take precedence over this option
                titleSelector: 'h1, h2, h3, h4, h5, h6',

                // If slides do not have a matching title, attempt to use the
                // start of the text content as the title instead
                useTextContentForMissingTitles: false,

                // Hide slides from the menu that do not have a title.
                // Set to 'true' to only list slides with titles.
                hideMissingTitles: false,

                // Adds markers to the slide titles to indicate the 
                // progress through the presentation. Set to 'false'
                // to hide the markers.
                markers: true,

                // Specify custom panels to be included in the menu, by
                // providing an array of objects with 'title', 'icon'
                // properties, and either a 'src' or 'content' property.
                // custom: false,
                custom: [ ],
                // Specifies the themes that will be available in the themes
                // menu panel. Set to 'true' to show the themes menu panel
                // with the default themes list. Alternatively, provide an
                // array to specify the themes to make available in the
                // themes menu panel, for example...
                // [
                //     { name: 'Black', theme: 'css/theme/black.css' },
                //     { name: 'White', theme: 'css/theme/white.css' },
                //     { name: 'League', theme: 'css/theme/league.css' }
                // ]
                themes: false,

                // Specifies the path to the default theme files. If your
                // presentation uses a different path to the standard reveal
                // layout then you need to provide this option, but only
                // when 'themes' is set to 'true'. If you provide your own 
                // list of themes or 'themes' is set to 'false' the 
                // 'themesPath' option is ignored.
                themesPath: 'css/theme/',

                // Specifies if the transitions menu panel will be shown.
                // Set to 'true' to show the transitions menu panel with
                // the default transitions list. Alternatively, provide an
                // array to specify the transitions to make available in
                // the transitions panel, for example...
                // ['None', 'Fade', 'Slide']
                transitions: false,

                // Adds a menu button to the slides to open the menu panel.
                // Set to 'false' to hide the button.
                openButton: true,

                // If 'true' allows the slide number in the presentation to
                // open the menu panel. The reveal.js slideNumber option must 
                // be displayed for this to take effect
                openSlideNumber: false,

                // If true allows the user to open and navigate the menu using
                // the keyboard. Standard keyboard interaction with reveal
                // will be disabled while the menu is open.
                keyboard: true,

                // Normally the menu will close on user actions such as
                // selecting a menu item, or clicking the presentation area.
                // If 'true', the sticky option will leave the menu open
                // until it is explicitly closed, that is, using the close
                // button or pressing the ESC or m key (when the keyboard 
                // interaction option is enabled).
                sticky: false,

                // If 'true' standard menu items will be automatically opened
                // when navigating using the keyboard. Note: this only takes 
                // effect when both the 'keyboard' and 'sticky' options are enabled.
                autoOpen: true,

                // If 'true' the menu will not be created until it is explicitly
                // requested by calling RevealMenu.init(). Note this will delay
                // the creation of all menu panels, including custom panels, and
                // the menu button.
                delayInit: false,

                // If 'true' the menu will be shown when the menu is initialised.
                openOnInit: false,

                // By default the menu will load it's own font-awesome library
                // icons. If your presentation needs to load a different
                // font-awesome library the 'loadIcons' option can be set to false
                // and the menu will not attempt to load the font-awesome library.
                loadIcons: false
            },
            chalkboard: { 
		toggleChalkboardButton: { left: "60px", bottom: "30px", top: "auto", right: "auto" },
		toggleNotesButton: { left: "90px", bottom: "30px", top: "auto", right: "auto" },
		
	}
        });

       

    </script>

</body>

</html>
